<html>

	<head>
		<meta charset="utf-8">
		<title>掌上工单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/common_article.css" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.mui-bar {
				background-color: rgba(0, 153, 204, .9);
			}
			.mui-content {
				padding: 0;
				margin-bottom: 0px;
			}
			.mui-icon {
				color: #FFFFFF;
			}
			.label {
				color: #7E7878;
			}
			.primary {
				color: #007aff;
				padding-top: 8px;
			}
			#images{
				margin-left: 3%;
				float: left;
			}
			#images img{
				padding: 0.7%;
			}
		</style>
	</head>

	<script id='complete-template' type="text/template">
		<% if(row){ %>
			
			<div class="mui-content-padded mui-input-group" style="margin: 0;">
				<div style="height: auto;text-align: center; padding: 10px;">
					<label style="width: auto;font-size: 20;">
						<%=( row.businessdescription || '')%>
					</label>
				</div>
				<div class="mui-input-row " style="color: #FFFFFF; background: #0099CC;">
					<label style="width: auto;">
					基本信息
					</label>
				</div>
				<div class="mui-input-row" style="height: auto;width: 100%;">
					<label class="label">工单编号</label>
					<label style="width: auto;">
						<%=( row.workno || '')%>
					</label>
				</div>

				<div class="mui-input-row" style="height: auto;">
					<label class="label">联系人名</label>
					<label style="width: auto;">
						<%=( row.username || '')%>
					</label>
				</div>

				<div class="mui-input-row" style="height: auto;">
					<label class="label">联系电话</label>
					<label style="width: auto;">
						<%=( row.userphoneno || '')%>
					</label>
					<span onclick="plus.device.dial( <%=( row.userphoneno || '')%>, true );" class="mui-icon mui-icon-phone-filled primary"></span>
				</div>

				<div class="mui-input-row" style="height: auto;">
					<label class="label">来电电话</label>
					<label style="width: auto;">
						<%=( row.incomingphoneno || '')%>
					</label>
					<span onclick="plus.device.dial( <%=( row.incomingphoneno || '')%>, true );" class="mui-icon mui-icon-phone-filled primary"></span>
				</div>

				<div class="mui-input-row" style="height: auto;">
					<label class="label">来电时间</label>
					<label style="width: auto;">
						<%=( row.inComingdate || '')%>
					</label>
				</div>

				<div class="mui-input-row" style="height: auto;">
					<label class="label">下发时间</label>
					<label style="width: auto;">
						<%=( row.cdate  || '')%>
					</label>
				</div>
				
				<div class="mui-input-row" style="height: auto;">
					<label class="label">派单人</label>
					<label style="width: auto;"><%=( row.sendUserName || '')%></label>
				</div>

				<div class="mui-input-row" style="height: auto;">
					<label class="label">任务地址</label>
					<label style="width: auto;">
						<%=( row.useraddress || '')%>
					</label>
				</div>
				<div class="mui-input-row" style="height: auto;">
					<label class="label">等级名称</label>
					<label style="width: auto;">
						<%=( row.taskLevelName || '')%>
					</label>
				</div>
				<div class="mui-input-row" style="height: auto;">
					<label class="label">来源名称</label>
					<label style="width: auto;">
						<%=( row.taskSourceName || '')%>
					</label>
				</div>
				<div class="mui-input-row" style="height: auto;">
					<label class="label">升级名称</label>
					<label style="width: auto;">
						<%=( row.isUpWorderName || '')%>
					</label>
				</div>
				<div class="mui-input-row" style="height: auto;">
					<label class="label">热力站名</label>
					<label style="width: auto;"><%=( row.heatingStation || '')%></label>
				</div>
				<div class="mui-input-row" style="height: auto;">
					<label class="label">任务备注</label>
					<label style="width: auto;">
						<%=( row.remark || '无')%>
					</label>
				</div>
				<div class="mui-input-row " style="color: #FFFFFF;background: #0099CC;">
					<label style="width: auto;">
					操作备注
					</label>
				</div>
				<div class="mui-input-row" style="height: auto;">
					<div class="mui-collapse-content mui-input-group">
						<div class="mui-input-group ">
							<% 
								var transfers = row.transfers;
								for(var i = 0;i < transfers.length;i ++){
									var transferType = transfers[i].transfertype;
									var workOrderStatus = '派送';
									if('1' == transferType){
										workOrderStatus = '派送';
									}else if('2' == transferType){
										workOrderStatus = '接单';
									}else if('3' == transferType){
										workOrderStatus = '延时';
									}else if('4' == transferType){
										workOrderStatus = '完成';
									}else if('7' == transferType){
										workOrderStatus = '拒绝';
									}else{
										workOrderStatus = '待确定';
									}
							%>
								<div class="mui-input-row"  style="height: auto;">
									<h5 class="mui-content-padded"><%=transfers[i].odate || '' %></h5>
									<label style="width: auto;"><%=workOrderStatus%> -> <%=transfers[i].remark || '无' %></label>
								<% 
									var files = transfers[i].files;
									if(files){
								%>
										<div id="images" style="width: 97%;">
								<%
										for(var j = 0;j < files.length;j ++)
										{
											if('1' == files[j].enclosureType)
											{
												var suffix = files[j].suffix ;
												var imgShortSrc = row.host+files[j].filepath.replace(('.'+suffix),('-z-0.'+suffix)) ;
												var imgSrc = row.host+files[j].filepath ;
												
								%>
												<img data-preview-src='<%=imgSrc%>' data-preview-group='1' src="<%=imgShortSrc%>">
								<%
											}
										}
								%>
										</div>
								
								<%}%>
								</div>
							<%}%>
						</div>
					</div>
				</div>
			</div>
			
		<%}%>

	</script>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="color: #FFFFFF;">任务详情</h1>
		</header>
		<div class="mui-content" id="task-content">
			
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.zoom.js"></script>
	<script src="js/mui.previewimage.js"></script>
	<script src="js/arttmpl.js"></script>
	<script type="text/javascript" src="js/md5.js"></script>
	<script type="text/javascript" src="js/uuid.js"></script>
	<script type="text/javascript" src="js/utils.js"></script>
	<script src="js/app.js"></script>

	<script type="text/javascript" charset="utf-8">
		mui.init();
		
	</script>

	<script>
		var taskId = 0,
			dataType = '';
		mui.previewImage();
		mui.plusReady(function() {
			taskId = xhz.getString("taskId");
			xhz.ajax(URL_TASK_DETAIL, {
				taskId: taskId
			}, function(data) {
				if (!data || data.code != 1) {
					mui.toast('你刷的太勤快了，亲');
					return;
				}
				afterGotData(data.data);
			});
			afterGotData = function(detail) {
				console.debug(JSON.stringify(detail));
				detail.host = HOST ;
				var detailInfo = template('complete-template', {
					"row": detail
				});
//				var content = '<div id="slider" class="mui-slider"><div class="mui-slider-group">';
//					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
//					content += '<div class="mui-slider-item"><a href="#"><img src="images/cbd.jpg"></a></div>';
//					<!-- 第一张 -->
//					content += '<div class="mui-slider-item"><a href="#"><img src="images/cbd.jpg"></a></div>';
//					<!-- 第二张 -->
//					content += '<div class="mui-slider-item"><a href="#"><img src="images/flash3.jpg"></a></div></div></div>';
				document.getElementById('task-content').innerHTML = detailInfo;
				var slider = mui(".mui-slider");
					slider.slider({
					  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
					});
			};
		});
	</script>

</html>